<template>
  <div class="my-item">
    {{ item.value }}
    <span
      class="bg-[#ff2d51] rounded-xl px-[12px] py-[5px] del"
      @click="del(item.id)"
      >删除</span
    >
  </div>
</template>

<script setup>
import mitts from "../bus";
const $props = defineProps({
  item: {
    type: Object,
    required: true,
  },
});
const del = (id) => {
  const res = confirm("确认要删除吗？");
  if (res) {
    mitts.emit("delList", id);
  }
};
</script>

<style lang="scss" scoped>
.my-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  &:nth-child(2n-1) {
    background-color: #94ca94;
  }
  &:nth-child(2n) {
    background-color: #eeeeee;
  }
  height: 45px;
  padding-inline: 20px;
  .del {
    color: white;
    font-size: 14px;
    cursor: pointer;
  }
}
</style>
